<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
    <script async="" type="text/javascript" src="https://pagead2.googlesyndication.com/pub-config/ca-pub-5751451760833794.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/input.css"/>
</head>
<body style="background-color: #422045;">
<div class="container" style="width:30%;height:350px;margin-top: 10%;">
    <div class="div">
        <div class="p"><b>Login Form</b></div>
    </div>
    <div class="div1">
        <form  action="demo-form.php" onsubmit="return validateForm()" method="post" class="login" name="myForm">

            <div class="field container">
                <input type="text" name="username"  class="input" placeholder="Username">
            </div>

            <div class="field container">
                <input type="password" name="password" class="input" placeholder="Password">
            </div>
            <input class="submit" type="submit" value="Sign In">
            <div>
                <a class="aa" href="#"><b>Lost your Password?</b></a>
            </div>

        </form>

    </div>

</div>
<script>
    function validateForm()
    {
        var x=document.forms["myForm"]["username"].value;
        var i=document.forms["myForm"]["password"].value;
        if (x==null || x=="")
        {
            alert("请输入用户名");
            return false;
        }
        if (i==null || i=="")
        {
            alert("请输入密码");
            return false;
        }

    }
</script>

</body>
</html>